<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>作曲家 - 听首歌吧!</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
</head>

<body style="padding: 25px;">
    <button class="layui-btn layui-btn-normal" onclick="start();">开始!</button>
    <button class="layui-btn" onclick="loadFromLocal();">从本地加载</button>
    <div id="log" style="padding-top: 19px;"></div>
    <script src='https://gitee.com/xtex/composer/widget_preview' async defer></script>
    <div id="osc-gitee-widget-tag"></div>
    <style>
        .osc_pro_color {
            color: #4183c4 !important;
        }

        .osc_panel_color {
            background-color: #ffffff !important;
        }

        .osc_background_color {
            background-color: #ffffff !important;
        }

        .osc_border_color {
            border-color: #e3e9ed !important;
        }

        .osc_desc_color {
            color: #666666 !important;
        }

        .osc_link_color * {
            color: #9b9b9b !important;
        }
    </style>
    <script type="text/javascript" src="lib/tone.js"></script>
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/gh/nbrosowsky/tonejs-instruments@master/Tonejs-Instruments.min.js"></script>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script type="text/javascript" src="utils.js"></script>
    <script type="text/javascript" src="composer.js"></script>
    <script type="text/javascript" src="player.js"></script>
    <script type="text/javascript">
        var logContainer = document.getElementById('log');
        // jsDelivr
        SampleLibrary.baseUrl = 'https://cdn.jsdelivr.net/gh/nbrosowsky/tonejs-instruments@master/samples/';
        Player.init();
        var music;

        function log(text) {
            var logEntry = document.createElement('p');
            logEntry.innerHTML = text;
            logContainer.appendChild(logEntry);
        }
        function start() {
            startMain();
        }
        function download() {
            const link = document.createElement('a');
            link.href = URL.createObjectURL(new Blob([JSON.stringify(music)], { type: 'text/json,charset=UTF-8' }));
            link.download = music.name + ".json";
            link.click();
        }
        function loadFromLocal() {
            var inp = document.createElement('input');
            inp.type = 'file';
            inp.accept = 'text/json';
            inp.addEventListener('change', function (event) {
                var reader = new FileReader();
                reader.onload = function () {
                    if (reader.result) {
                        music = JSON.parse(reader.result);
                        logContainer.innerHTML = '';
                        play();
                    }
                };
                reader.readAsText(event.target.files[0]);
            });
            inp.click();
        }
        async function startMain() {
            logContainer.innerHTML = '';
            log('正在作曲...');
            music = await Composer.doCompose();
            log('作曲完成, 您可以<a href="javascript:download()">导出JSON</a>');
            await play();
        }
        async function play() {
            log('正在播放 ' + music.name);
            await Player.play(music);
            log('播放结束');
        }
    </script>
</body>

</html>